<template>
  <div class="myOrderBox">
    <header-box title="我的订单" :showLeft="true" :showRight="true"></header-box>
    <tab :class="topFixed?'sticky':''" class="orderTab" active-color="#ff6600">
      <tab-item selected @on-item-click="tabClick">全部订单</tab-item>
      <tab-item @on-item-click="tabClick">待支付</tab-item>
      <tab-item @on-item-click="tabClick">待收货</tab-item>
      <tab-item @on-item-click="tabClick">已完成</tab-item>
    </tab>
    <div class="contBox">
      <template v-if="orderList.length >=0">
        <ul v-for="(item,index) in orderList" :key="index" class="orderBox">
          <li class="orderItem">
            <div class="title flex_sb">
              <router-link to class="shop flex">
                <img src="../assets/images/shopIcon.png" alt class="shopIcon" />
                <p>{{item.shop}}</p>
              </router-link>
              <div class="status flex">
                <span>{{item.status}}</span>
                <img
                  src="../assets/images/deletImg01.png"
                  alt
                  class="deletImg"
                  @click="deletClick(index)"
                />
              </div>
            </div>
            <ul class="goodsUl">
              <li v-for="(item2,index2) in item.goodsList" :key="index2" class="goodsLi flex">
                <div class="imgBox">
                  <img :src="item2.img" alt class="goodsImg" />
                </div>
                <div class="introduce">
                  <p class="goodsTitle">{{item2.title}}</p>
                  <div class="tags">
                    <span v-for="(item3,index3) in item2.tags" :key="index3">{{item3}}</span>
                  </div>
                  <div class="priceBox">
                    <span class="money">¥{{item2.money}}</span>
                    <span class="num">×{{item2.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="freight flex">
            <div class="lable">运费险</div>
            <div class="hint">确认收货后15天内退货都可理赔</div>
            <x-icon type="ios-arrow-right" size="20" class="moreIcon"></x-icon>
          </li>
          <li class="total">
            <div>
              合计：
              <span class="total">¥{{item.total}}</span>
              <span>(含运费¥{{item.freight}})</span>
            </div>
          </li>
          <li class="editBox">
            <router-link to="logistics" class="logistics btn">查看物流</router-link>
            <router-link to="logistics" class="againBuy btn">再次购买</router-link>
          </li>
        </ul>
      </template>
      <div v-if="orderList.length <=0" class="nodataBox">
        <img src="../assets/images/nodata1.b7f2be61.png" alt />
        <p
          class="hintTitle"
        >您还没有{{currentIndex==0?'':currentIndex==1?'待支付':currentIndex==2?'待收货':'已完成'}}订单哦</p>
        <router-link to="/" class="stroll">去首页</router-link>
      </div>
    </div>
    <!-- 删除弹框 -->
    <confirm v-model="deletShow" title="确定要删除吗" @on-confirm="deletConfirm"></confirm>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { Tab, TabItem, Divider, Confirm } from 'vux'
const arr = [
  {
    shop: '百草味官方旗舰店',
    status: '已完成',
    total: 78.0,
    freight: 0.0,
    goodsList: [
      {
        img: require('../assets/images/1572917425316_imgApp_tmndir.jpg'),
        title:
          '百草味 肉类零食 酱香鸭舌头28g 鸭肉类卤味零食网红小吃温州特产满减',
        tags: ['7天无理由退款', '运费险'],
        money: '36.00',
        num: 1
      },
      {
        img: require('../assets/images/1572917425316_imgApp_tmndir.jpg'),
        title:
          '百草味 肉类零食 酱香鸭舌头28g 鸭肉类卤味零食网红小吃温州特产满减',
        tags: ['7天无理由退款', '运费险'],
        money: '36.00',
        num: 1
      }
    ]
  }
]
export default {
  components: {
    HeaderBox,
    Tab,
    TabItem,
    Divider,
    Confirm
  },
  data() {
    return {
      currentIndex: 0,
      topFixed: false,
      deletShow: false,
      orderList: []
    }
  },
  mounted() {
    this.nowTab = this.$route.query.tab
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f8f9fa')
    document.addEventListener('scroll', e => {
      let Wheight = window.screen.height
      let top = e.srcElement.scrollingElement.scrollTop // 获取页面滚动高度
      if (Wheight - top <= 400) {
        this.topFixed = true
      } else {
        this.topFixed = false
      }
    })
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    tabClick(index) {
      this.currentIndex = index
      if (this.currentIndex == 0 || this.currentIndex == 2) {
        this.orderList = arr
      } else {
        this.orderList = []
      }
    },
    deletClick(index) {
      this.deletShow = true
      this.currentId = index
    },
    deletConfirm() {}
  }
}
</script>

<style lang="less" scoped>
.myOrderBox {
  /deep/.orderTab {
    background-color: #fff;
    padding-top: 80px;
    &.sticky {
      position: sticky;
      top: 0;
      z-index: 3;
    }
  }
  .contBox {
    padding: 20px;
    .orderBox {
      border-radius: 20px;
      background-color: #fff;
      padding: 10px 20px;
      list-style: none;
      margin: 20px 0;
      .orderItem {
        margin-bottom: 20px;
        .title {
          font-size: 30px;
          padding: 10px 0;
          .shop {
            flex-grow: 1;
            margin-right: 20px;
            overflow: hidden;
            .shopIcon {
              margin-right: 20px;
              width: 40px;
            }
            p {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .status {
            flex-shrink: 0;
            .deletImg {
              margin-left: 20px;
              width: 40px;
            }
          }
        }
        .goodsUl {
          .goodsLi {
            list-style: none;
            margin-bottom: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            .imgBox {
              flex-shrink: 0;
              position: relative;
              border-radius: 20px;
              overflow: hidden;
              .goodsImg {
                width: 200px;
              }
              &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.05);
              }
            }

            .introduce {
              margin-left: 20px;
              flex-grow: 1;
              .goodsTitle {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 30px;
                height: 90px;
              }
              .tags {
                margin: 10px 0;
                span {
                  display: inline-block;
                  background-color: #fffae5;
                  border: 2px solid #fc0;
                  margin-right: 10px;
                  padding: 0 5px;
                  border-radius: 10px;
                }
              }
              .priceBox {
                font-size: 30px;
                .money {
                }
                .num {
                  margin-left: 20px;
                  color: #777;
                }
              }
            }
          }
        }
      }
      .freight {
        .lable {
          font-size: 30px;
        }
        .hint {
          margin-left: 20px;
          width: 500px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 30px;
        }
        .moreIcon {
          margin-left: auto;
        }
      }
      .total {
        margin: 20px 0;
        font-size: 30px;
        color: #777;
        text-align: right;
        .total {
          color: #000;
          margin: 0 10px;
        }
      }
      .editBox {
        text-align: right;

        .btn {
          color: currentColor;
          border: 2px solid #eee;
          border-radius: 10px;
          padding: 5px 20px;
          display: inline-block;
          margin-left: 20px;
          font-size: 30px;
        }
        .againBuy {
          color: #f42;
        }
      }
    }

    .nodataBox {
      text-align: center;
      img {
        width: 60%;
        margin-top: 150px;
      }
      .hintTitle {
        margin: 30px 0;
        font-size: 36px;
      }
      .stroll {
        color: currentColor;
        font-size: 30px;
        border-radius: 10px;
        padding: 10px 40px;
        border: 2px solid #777;
        background-color: #f8f9fa;
      }
    }
  }

  /deep/.weui-dialog__bd {
    min-height: 0;
  }
}
</style>